<template>
  <li class="main-item">
    <h3 class="title">
      <a href="#">全栈名师带你解析Vue3.0(14ref与reactive)</a>
    </h3>
    <div class="item-content">
      可以叫我窈窈嘛： （完结可食!!!）【可可爱爱 jpg.】 《一梦清欢》
      摄政王和阿姊圆房的那天，喊的是我的名字。
      这件事，是阿姊的身边儿人兰岚告诉我的。 摄…
      <span class="check-all">查看全文 <Icon type="ios-arrow-down" /></span>
    </div>
    <div class="details">
      <div class="agree-refuse">
        <button @click="changeMsg" :class="{ active: isActive1 }">
          <Icon type="md-arrow-dropup" />{{ agree }}
        </button>
        <button @click="changeActive2" :class="{ active: isActive2 }">
          <Icon type="md-arrow-dropdown" />
        </button>
      </div>
      <ul class="add-funs">
        <li class="fun-item">
          <Icon type="ios-chatbubbles" />
          <span class="item-word">添加评论</span>
        </li>
        <li class="fun-item">
          <Icon type="ios-share-alt" />
          <span class="item-word">分享</span>
        </li>
        <li class="fun-item">
          <Icon type="md-star" />
          <span class="item-word">收藏</span>
        </li>
        <li class="fun-item">
          <Icon type="md-heart" />
          <span class="item-word">喜欢</span>
        </li>
        <li class="fun-item">
          <Icon type="ios-flag" />
          <span class="item-word">举报</span>
        </li>
      </ul>
    </div>
  </li>
</template>

<script>
export default {
  name: "Item",
  data() {
    return {
      agree: "赞同",
      isActive1: false,
      isActive2: false,
    };
  },
  methods: {
    changeMsg() {
      this.agree = this.agree === "赞同" ? "已赞同" : "赞同";
      if (this.isActive2) {
        this.isActive2 = false;
        this.isActive1 = true;
      } else {
        this.isActive1 = !this.isActive1;
      }
    },
    changeActive2() {
      if (this.isActive1) {
        this.isActive1 = false;
        this.agree = "赞同";
        this.isActive2 = true;
      } else {
        this.isActive2 = !this.isActive2;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
$color: #2d8cf0;
.main-item {
  border-bottom: 1px solid #eee;
  padding: 2rem;
  .title {
    font-weight: bold;
    font-size: 1.9rem;
  }
  .item-content {
    height: 6rem;
    margin-top: 1.5rem;
    line-height: 2;
    .check-all {
      color: #2d8cf0;
      cursor: pointer;
      margin-left: 1rem;
    }
  }
  .details {
    display: flex;
    align-items: center;
    margin-top: 1rem;
    .agree-refuse {
      button {
        background: rgba(0, 132, 255, 0.1);
        color: $color;
        padding: 0.5rem 0.8rem;
        margin: 0 0.3rem;
        border-radius: 0.3rem;
      }
      .active {
        background: $color;
        color: #fff;
      }
    }
    .add-funs {
      display: flex;
      margin-left: 2rem;
      .fun-item {
        margin: 1rem;
        color: rgb(133, 144, 166);
        cursor: pointer;
        font-size: 1.4rem;
        .item-word {
          margin-left: 0.3rem;
        }
      }
    }
  }
}

.main-item:last-of-type {
  border-bottom: none;
}
</style>